<template>
	<view class="navigation-bar" :style="displayStyle">
		<view class="nav-content">
			<view class="nav-left">
				<view v-if="back" class="back-btn" @tap="onBack">
					<image class="back-icon" src="/static/arrow-right.svg"></image>
				</view>
				<view v-if="homeButton" class="home-btn" @tap="onHome">
					<image class="home-icon" src="/static/home.svg"></image>
				</view>
			</view>
			
			<view class="nav-center">
				<text class="nav-title">{{ title }}</text>
			</view>
			
			<view class="nav-right">
				<view v-if="loading" class="loading-indicator">
					<view class="loading-spinner"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			extClass: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			background: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: ''
			},
			back: {
				type: Boolean,
				default: true
			},
			loading: {
				type: Boolean,
				default: false
			},
			homeButton: {
				type: Boolean,
				default: false
			},
			animated: {
				// 显示隐藏的时候opacity动画效果
				type: Boolean,
				default: true
			},
			show: {
				// 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
				type: Boolean,
				default: true
			},
			// back为true的时候，返回的页面深度
			delta: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				displayStyle: '',
				ios: true,
				innerPaddingRight: '',
				leftWidth: '',
				safeAreaTop: ''
			}
		},
		mounted() {
			this.initNavigationBar();
		},
		watch: {
			show: {
				handler(newVal) {
					this._showChange(newVal);
				},
				immediate: true
			}
		},
		methods: {
			initNavigationBar() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
				const platform = systemInfo.platform;
				const isAndroid = platform === 'android';
				const isDevtools = platform === 'devtools';
				
				// 获取菜单按钮信息
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				const windowWidth = systemInfo.windowWidth;
				const safeArea = systemInfo.safeArea || { top: 0, bottom: 0 };
				
				this.ios = !isAndroid;
				this.innerPaddingRight = `padding-right: ${windowWidth - menuButtonInfo.left}px`;
				this.leftWidth = `width: ${windowWidth - menuButtonInfo.left}px`;
				this.safeAreaTop = isDevtools || isAndroid ? 
					`height: calc(var(--height) + ${safeArea.top}px); padding-top: ${safeArea.top}px` : '';
			},
			_showChange(show) {
				const animated = this.animated;
				let displayStyle = '';
				if (animated) {
					displayStyle = `opacity: ${show ? '1' : '0'};transition:opacity 0.5s;`;
				} else {
					displayStyle = `display: ${show ? '' : 'none'}`;
				}
				this.displayStyle = displayStyle;
			},
			onBack() {
				if (this.delta) {
					uni.navigateBack({
						delta: this.delta
					});
				}
				this.$emit('back', { delta: this.delta });
			},
			onHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>
	.navigation-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background: white;
		border-bottom: 1px solid #e2e8f0;
	}

	.nav-content {
		display: flex;
		align-items: center;
		height: 44px;
		padding: 0 16px;
		position: relative;
	}

	.nav-left {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.back-btn, .home-btn {
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #f3f4f6;
		transition: all 0.2s ease;
	}

	.back-btn:active, .home-btn:active {
		background: #e5e7eb;
		transform: scale(0.95);
	}

	.back-icon {
		width: 16px;
		height: 16px;
		transform: rotate(180deg);
		opacity: 0.8;
	}

	.home-icon {
		width: 16px;
		height: 16px;
		opacity: 0.8;
	}

	.nav-center {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.nav-title {
		font-size: 18px;
		font-weight: 600;
		color: #1f2937;
		text-align: center;
	}

	.nav-right {
		display: flex;
		align-items: center;
	}

	.loading-indicator {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loading-spinner {
		width: 20px;
		height: 20px;
		border: 2px solid #e5e7eb;
		border-top: 2px solid #ff6b35;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style>


